<template>
  <el-page-header>
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <router-link to="/manager/mangerindex" class="menu-router">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item
        ><router-link to="/manager/couponmanager" class="menu-router">优惠卷管理</router-link></el-breadcrumb-item
        >
      </el-breadcrumb>
    </template>
    <template #content>

      <span class="text-large font-600 mr-3"> 优惠卷管理 </span>
    </template>
  </el-page-header>
  <el-button type="success" style=" margin-left: 20px;margin-top: 20px ;width: 80px; height: 50px; margin-bottom: 10px" @click="showdiglog1=true">增加优惠卷</el-button>
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column fixed prop="description" label="优惠卷明细" width="120" />
    <el-table-column prop="discountValue" label="折扣力度" width="100" />
    <el-table-column prop="minimumSpend" label="最低折扣门槛" width="100" />
    <el-table-column prop="maximumSpend" label="最多优惠金额" width="100" />
    <el-table-column prop="startDate" label="优惠卷开始时间" width="120"/>
    <el-table-column prop="endDate" label="优惠卷结束时间" width="120"/>
    <el-table-column prop="number" label="优惠卷余量" width="120"/>
    <el-table-column prop="member" label="等级" width="120"/>
    <el-table-column prop="isdelete" label="状态" width="600" >
      <template #default="{ row }">
        <span :style="{ color:row.color, fontWeight: 'bold' , fontSize: '15px', fontFamily: 'Arial, sans-serif'}">{{ row.isdelete}}</span>
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" width="120" >
      <template #default="{row}">
        <el-button link type="primary" size="small" class="el-button1" @click="getcouponByid(row)">修改优惠卷详情</el-button>
        <el-button link type="primary" size="small" @click="showdiglog3s(row)">赠与用户优惠卷</el-button>
        <el-button link type="primary" size="small" @click="getuserlistBycouponid(row)">移除用户优惠卷</el-button>
        <el-button link type="primary" size="small" @click="deleteCoupon(row)">{{row.button}}</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog title="插入优惠卷" v-model="showdiglog1" width="30%">
    <el-form :model="coupon" label-width="100px">
      <el-form-item label="优惠卷名称">
        <el-input v-model="coupon.description"></el-input>
      </el-form-item>
      <el-form-item label="折扣力度">
        <el-input v-model="coupon.discountValue"></el-input>
      </el-form-item>
      <el-form-item label="最低折扣门槛">
        <el-input v-model="coupon.minimumSpend"></el-input>
      </el-form-item>
      <el-form-item label="最多优惠金额">
        <el-input v-model="coupon.maximumSpend"></el-input>
      </el-form-item>
      <el-form-item label="优惠卷开始时间">
        <div class="block">
          <el-date-picker
              v-model="coupon.startDate"
              type="datetime"
              placeholder="设置开始时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
          />
        </div>
      </el-form-item>
      <el-form-item label="优惠卷结束时间">
        <div class="block">
          <el-date-picker
              v-model="coupon.endDate"
              type="datetime"
              placeholder="设置结束时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
          />
        </div>
      </el-form-item>
      <el-form-item label="优惠卷余量">
        <el-input v-model="coupon.number"></el-input>
      </el-form-item>
      <el-form-item label="等级">
       <el-select v-model="coupon.member" placeholder="请选择等级">
         <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value"
         />
       </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="insertcoupon()">确定</el-button>
        <el-button @click="showdiglog1=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog title="修改优惠卷详情" v-model="showdiglo2" width="30%">
    <el-form :model="coupon" label-width="100px">
      <el-form-item label="优惠卷名称">
        <el-input v-model="coupon.description" ></el-input>
      </el-form-item>
      <el-form-item label="折扣力度">
        <el-input v-model="coupon.discountValue"></el-input>
      </el-form-item>
      <el-form-item label="最低折扣门槛">
        <el-input v-model="coupon.minimumSpend"></el-input>
      </el-form-item>
      <el-form-item label="最多优惠金额">
        <el-input v-model="coupon.maximumSpend"></el-input>
      </el-form-item>
      <el-form-item label="优惠卷开始时间">
        <div class="block">
          <el-date-picker
              v-model="coupon.startDate"
              type="datetime"
              placeholder="设置开始时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
          />
        </div>
      </el-form-item>
      <el-form-item label="优惠卷结束时间">
        <div class="block">
          <el-date-picker
              v-model="coupon.endDate"
              type="datetime"
              placeholder="设置结束时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
          />
        </div>
      </el-form-item>
      <el-form-item label="优惠卷余量">
        <el-input v-model="coupon.number"></el-input>
      </el-form-item>
      <el-form-item label="等级">
        <el-select v-model="coupon.member" placeholder="请选择等级">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button type="primary" @click="updatecoupon()">确定</el-button>
      <el-button @click="showdiglo2=false">取消</el-button>
    </el-form-item>

  </el-dialog>
  <el-dialog title="赠与用户优惠卷" v-model="showdiglog3" width="30%">
    <el-select v-model="userid" placeholder="请选择用户">
      <span slot="prefix">选择你要赠与的用户</span>
      <el-option
          v-for="item in userlist"
          :key="item.id"
          :label="item.username"
          :value="item.id"
      />
    </el-select>
    <el-form-item style="margin-top:10px;margin-left: 100px">
      <el-button type="primary" @click="sentcouponToUser()">确定</el-button>
      <el-button @click="showdiglog3=false">取消</el-button>
    </el-form-item>
  </el-dialog>
  <el-dialog title="移除用户优惠卷" v-model="showdiglog4" width="30%">
    <el-select v-model="userid" placeholder="请选择用户">
      <span slot="prefix">选择你要移除的用户</span>
      <el-option
          v-for="item in userlistBycouponid"
          :key="item.id"
          :label="item.username"
          :value="item.id"
      />
    </el-select>
    <el-form-item style="margin-top:10px;margin-left: 100px">
      <el-button type="primary" @click="deleteUsercoupon()">确定</el-button>
      <el-button @click="showdiglog4=false">取消</el-button>
    </el-form-item>
  </el-dialog>
</template>

<script setup>
import moment from 'moment';
import {onMounted, reactive, ref} from "vue";
import {
  deletcouponservice,
  deletUsercouponservice,
  getallcouponsBybackgroundservice, getalluserservice,
  getcouponservice, getuserlistBycouponidservice,
  insertcouponService, sentcouponToUserservice,
  updatecouponService
} from "@/api/food.js";
import {ElMessage} from "element-plus";
const userid=ref()
const userlistBycouponid=reactive([])
const showdiglog1=ref(false)
const showdiglo2=ref(false)
const showdiglog3=ref(false)
const showdiglog4=ref(false)
const couponId=ref()
const userlist=reactive([])
const tableData=reactive([])
const coupon=reactive({
  id:"",
  description:"",
  discountValue:"",
  minimumSpend:"",
  maximumSpend:"",
  startDate:"",
  endDate:"",
  number:"",
  member:"",
  version:0,
  isdelete:0,
})
const options=reactive([
    {
      value: '一级会员',
      label: '一级会员'
    },
    {
      value: '二级会员',
      label: '二级会员'
    },

    {
      value: '三级会员',
      label: '三级会员'
    },
])
const showdiglog3s=(row)=>{
  showdiglog3.value=true
  couponId.value=row.id
}
const showdiglog4s=(row)=>{

}
const convertToLocalDateTime = (coupon) => {
  coupon.startDate = moment(coupon.startDate).format("YYYY-MM-DDTHH:mm:ss");
  coupon.endDate = moment(coupon.endDate).format("YYYY-MM-DDTHH:mm:ss");

}
const getallcoupon =async () => {
const response=await getallcouponsBybackgroundservice()
  if(response.code===200){
    tableData.length=0
    response.date.forEach((item) => {
      if(item.isdelete===0){
        item.button="删除优惠卷";
        item.isdelete="可正常使用";
        item.color="green";
      }
      if(item.isdelete===1){
        item.button="移除优惠卷";
        item.isdelete="已失效";
        item.color="red";
      }
     item.startDate= formatDateTime(item.startDate)
      item.endDate= formatDateTime(item.endDate)
      tableData.push(item)
    })
    ElMessage.success("获取优惠卷成功")
  }else {
    ElMessage.error("获取优惠卷失败")
  }


}
const insertcoupon = async () => {
  convertToLocalDateTime(coupon)
  const response=await insertcouponService(coupon)
  if(response.code===200){
    await getallcoupon()
    ElMessage.success("插入优惠卷成功")
    showdiglog1.value=false
  }else {
    showdiglog1.value=false
    ElMessage.error("插入优惠卷失败")
  }
}
onMounted(()=>{
  getallcoupon()
  getuserlist()
})
const getcouponByid =async (coupons) => {
  showdiglo2.value=true
  const response=await getcouponservice(coupons.id)
  if(response.code===200){
    coupon.id=response.date.id
    coupon.description=response.date.description
    coupon.discountValue=response.date.discountValue
    coupon.minimumSpend=response.date.minimumSpend
    coupon.maximumSpend=response.date.maximumSpend
    coupon.startDate=response.date.startDate
    coupon.endDate=response.date.endDate
    coupon.number=response.date.number
    coupon.member=response.date.member

    console.log("coupon"+coupon.id)
    ElMessage.success("获取优惠卷成功")
  }else {
    ElMessage.error("获取优惠卷失败")
  }

}
const updatecoupon = async () => {
  convertToLocalDateTime(coupon)
  const response=await updatecouponService(coupon)
  if(response.code===200){
    await getallcoupon()
    ElMessage.success("修改优惠卷成功")
    showdiglo2.value=false
  }else {
    ElMessage.error("修改优惠卷失败")
  }

}
const getuserlist =async () => {
  const response=await getalluserservice()
  if(response.code===200){
    userlist.length=0
    response.date.forEach((item) => {
      userlist.push(item)
    })
    ElMessage.success("获取用户成功")
  }else {
    ElMessage.error("获取用户失败")
  }

}
const sentcouponToUser = async () => {
  const response=await sentcouponToUserservice(userid,couponId)
  if(response.code===200){
    showdiglog3.value=false
    await getallcoupon()
    ElMessage.success("发送成功")
  }else {
    ElMessage.error("发送失败")
  }

}
const getuserlistBycouponid =async (row) => {
  showdiglog4.value=true
  couponId.value=row.id
  console.log(row.id)
  const response=await getuserlistBycouponidservice(row.id)
  if(response.code===200){
    userlistBycouponid.length=0
    response.date.forEach((item) => {
      userlistBycouponid.push(item)
    })
    ElMessage.success("获取用户成功")
  }else {
    ElMessage.error("获取用户失败")
  }

}
const deleteUsercoupon = async () => {
  const response=await deletUsercouponservice(couponId,userid)
  if(response.code===200){
    ElMessage.success("删除成功")
    showdiglog4.value=false
  }else {
    ElMessage.error("删除失败")
  }
}
const formatDateTime = (dateTimeStr) => {
  const date = new Date(dateTimeStr);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
};
const deleteCoupon = async (row) => {
  const response=await deletcouponservice(row.id)
  if(response.code===200){
    ElMessage.success("删除成功")
    await getallcoupon()
  }else {
    ElMessage.error("删除失败")
  }
}
</script>

<style scoped>
.el-button1{
  margin-left: 12px;
}
</style>